/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-colorwheel-border-color-disabled: GrayText;
        --highcontrast-colorwheel-fill-color-disabled: Canvas;
        forced-color-adjust: none;
    }
}

:host {
    --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
    --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
    --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
    --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
    --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
    --_track-width: var(--spectrum-colorwheel-track-width);
    --_border-width: var(--spectrum-colorwheel-border-width);
    min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
    inline-size: var(--spectrum-colorwheel-width);
    block-size: var(--spectrum-colorwheel-height);
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    display: block;
    position: relative;
}

:host([focused]) {
    z-index: 1;
}

:host([disabled]) {
    pointer-events: none;
}

:host([dragged]) {
    z-index: 1;
}

.inner {
    inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
    block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
    margin: auto;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
}

.colorarea-container {
    block-size: auto;
    inline-size: 100%;
    margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
    justify-content: center;
    align-items: center;
    display: flex;
}

.slider {
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 0;
    pointer-events: none;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

.handle {
    transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2));
    inset-block-start: 50%;
    inset-inline: 50%;
}

.border {
    background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
    inline-size: var(--spectrum-colorwheel-width);
    block-size: var(--spectrum-colorwheel-height);
    clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
    position: relative;
}

:host([disabled]) .border {
    background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
}

.wheel {
    inset-block: var(--spectrum-colorwheel-border-width);
    inset-inline: var(--spectrum-colorwheel-border-width);
    clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));
    background: conic-gradient(from 90deg, red, #ff8000, #ff0, #80ff00, #0f0, #00ff80, #0ff, #0080ff, #00f, #8000ff, #f0f, #ff0080, red);
    position: absolute;
}

:host([disabled]) .wheel {
    pointer-events: none;
    background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
}
